<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        {{pageTitle}}
        <span class="text-subtitle1">{{$t('列表')}}</span>
      </div>
      <q-space></q-space>
      <search-bar-toggle-btn v-model="searchBarVisibility"></search-bar-toggle-btn>
    </div>
    <div class="q-pa-sm shadow-2 q-mb-md items-center" v-show="searchBarVisibility">
      <div class="row q-col-gutter-sm">
        <div class="col-xs-8 col-sm-6 col-md-5 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">{{$t('用户名')}}</div>
          <div class="col-8">
            <q-input @focus="ui.select" @keyup.enter="loadListData(2)" :maxlength="30" square
              :hide-bottom-space="true"
              v-model="fpsReq.userName" dense outlined stack-label :readonly="listDataLoadingState" clearable />
          </div>
        </div>
        <div class="col-shrink">
          <q-toggle :toggle-indeterminate="true" class="q-mt-xs" dense :label="$t('是否有效')" no-caps v-model="fpsReq.enabledState"
            :disable="listDataLoadingState" @update:model-value="loadListData(2)" />
        </div>
        <div class="col-shrink">
          <q-toggle :toggle-indeterminate="true" class="q-mt-xs" dense :label="$t('是否API账号')" no-caps v-model="fpsReq.isApiUser"
            :disable="listDataLoadingState" @update:model-value="loadListData(2)" />
        </div>
        <div class="col-xs-8 col-sm-6 col-md-5 col-lg-3 row q-col-gutter-sm" v-if="props.internalTagsType>0">
          <div class="col-4 text-right searchbar-label">{{props.internalTagsLabel}}</div>
          <div class="col-8">
            <simple-filter-select :readonly="listDataLoadingState" :options="props.internalTagsData"
              :use-filter="false" v-model="fpsReq.internalTags" />
          </div>
        </div>
        <div>
          <q-btn color="primary" icon="search" :label="$t('查询')" no-caps @click="loadListData(2)" :disable="listDataLoadingState" />
        </div>
      </div>
    </div>

    <div class="shadow-2">
      <q-table @request="fpsAssist.onDataTableRequest" :rows="$d.tableData" :columns="fpsInfo.columnsInfo"
        separator="cell"
        row-key="userName" v-model:pagination="fpsInfo.paginationInfo" :visible-columns="fpsInfo.visibleColumns" dense
        flat
        :hide-pagination="true" :loading="listDataLoadingState" color="primary" binary-state-sort
        @row-dblclick="(evt,row)=>{fpsNav.gotoDetail(row.userName)}">
        <!--:visible-columns 控制切换-->
        <template v-slot:top="props">
          <!--功能按钮-->
          <div class="q-gutter-sm">
            <q-btn color="primary" icon="add" :label="$t('新建')" no-caps @click="fx.router.push({ name: '/comm/cfg/user/create' })"
              v-if="fx.hasModifyRight('Comm.UserMgr.Edit')" />
          </div>
          <!--填充所有剩余空间-->
          <q-space />
          <table-col-options-cfg v-model:table-columns="fpsInfo.columnsInfo"
            v-model:visible-columns="fpsInfo.visibleColumns"
            @update-col-options-for-save="fpsAssist.saveColOptions">
          </table-col-options-cfg>
          <q-btn flat dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                 :title="props.inFullscreen ? $t('退出全屏') : $t('全屏显示')" @click="props.toggleFullscreen" class="q-ml-sm"
            :ripple="false" />
        </template>
        <template v-slot:no-data>
          <div class="full-width items-center justify-center row">
            <q-icon name="error_outline" />
            {{$t('无数据')}}
            <q-btn flat icon="refresh" :loading="listDataLoadingState"
              :disable="listDataLoadingState" dense :title="$t('刷新')" no-caps size="sm" class="q-ml-sm" @click="loadListData"></q-btn>
          </div>
        </template>
        <template v-slot:body-cell-state="props">
          <q-td :props="props" auto-width>
            <q-badge :color="props.row.enabledState?'positive':'grey-6'"
              :label="props.row.enabledState ? $t('有效') : $t('无效')" />
          </q-td>
        </template>
        <template v-slot:body-cell-isApiUser="props">
          <q-td :props="props" auto-width>
            <q-badge :color="props.row.isApiUser?'positive':'grey-6'"
              :label="props.row.isApiUser ? $t('是') : $t('否')" />
          </q-td>
        </template>
        <!--操作列插槽-->
        <template v-slot:body-cell-operation="props">
          <q-td :props="props" auto-width>
            <q-btn color="primary" :label="$t('查看')" no-caps class="btn-in-row q-mr-xs" :dense="true"
              @click="evt => fpsNav.gotoDetail(props.row.userName, evt)" />
            <q-btn color="primary" :label="$t('编辑')" no-caps :dense="true" @click="evt => fpsNav.gotoEdit(props.row.userName, evt)"
              class="btn-in-row" v-if="fx.hasModifyRight('Comm.UserMgr.Edit')"
              :disable="props.row.userName === 'admin'" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <paging-bar :pageNo="fpsReq.pageNo" :pageSize="fpsReq.pageSize" :totalAmount="fpsInfo.totalAmount"
            @pagesize-changed="fpsAssist.onPageSizeChanged" @go-to-page="fpsNav.gotoPage"
            :loading-state="listDataLoadingState" />
        </template>
      </q-table>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'userListStd'
}
</script>
<script lang="ts" setup>
import {useFpsHelper} from '../../hooks/fpsHelper'
import {useTitleHelper} from '../../hooks/titleHelper'
import {reactive, ref} from 'vue'
import {GetUserInfoListReq, GetUserInfoListResp, UserInfo} from '../../defs/user'
import {ColumnInfo, GenericDropdownListItem} from '../../defs/comm'
import SimpleFilterSelect from '../../components/SimpleFilterSelect.vue'
import { useI18n } from 'vue-i18n'
const {t} = useI18n()

interface PropsDef {
  //内部标志类型：0-不显示 1-单选下拉
  internalTagsType?: number
  //内部标志的下拉数据
  internalTagsData?: GenericDropdownListItem[]
  //内部标志位栏位的标签
  internalTagsLabel?: string
}

const props = withDefaults(defineProps<PropsDef>(), {
  internalTagsType: 0,
  internalTagsData: () => [],
  internalTagsLabel: '内部标志位',
})

const pageTitle = t('用户管理')
useTitleHelper(pageTitle)

// 是否处于数据列表加载的状态
const listDataLoadingState = ref(false)

// 查询参数
const fpsReq: GetUserInfoListReq = reactive({
  userName: null,
  internalTags: null,
  enabledState: null,
  isApiUser: null,
  pageNo: 1,
  pageSize: 40,
  isDescending: false,
  orderBy: null
})

const columnsDefine: ColumnInfo[] = [
  {
    name: 'operation',
    label: t('操作'),
    field: 'operation',
    align: 'left',
    defOrder: 1,
    defVisible: true
  },
  {
    name: 'userName',
    label: t('用户名'),
    field: 'userName',
    align: 'left',
    defOrder: 2,
    defVisible: true,
    sortable: true
  },
  {
    name: 'realName',
    label: t('真实姓名'),
    field: 'realName',
    align: 'left',
    defOrder: 3,
    defVisible: true,
    sortable: true
  },
  {
    name: 'email',
    label: 'Email',
    field: 'email',
    align: 'left',
    defOrder: 4,
    defVisible: true
  },
  {
    name: 'mobilePhone',
    label: t('手机号码'),
    field: 'mobilePhone',
    align: 'left',
    defOrder: 5,
    defVisible: true
    // format: (value: any, row: any) => $f.fmt.dtFmtFull(value as Date)
  },
  {
    name: 'state',
    label: t('状态'),
    field: 'state',
    align: 'left',
    defOrder: 6,
    defVisible: true
  },
  {
    name: 'rolesString',
    label: t('角色信息'),
    field: 'rolesString',
    align: 'left',
    defOrder: 7,
    defVisible: true
  },
  {
    label: t('是否API账号'),
    name: 'isApiUser',
    field: 'isApiUser',
    align: 'left',
    defOrder: 8,
    defVisible: true
  },
  {
    label: t('外部系统账号'),
    name: 'externalUserName',
    field: 'externalUserName',
    align: 'left',
    defOrder: 9,
    defVisible: false
  },
]

if (props.internalTagsType > 0) {
  columnsDefine.push({
    label: props.internalTagsLabel,
    name: 'internalTags',
    field: 'internalTags',
    align: 'left',
    defOrder: 10,
    defVisible: true,
    format: (value: string | null | undefined) => $f.fmt.userInternalTagsDisp(value),
    sortable: true
  })
}

const $d = reactive({
  tableData: [] as UserInfo[]
})

const loadListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      fpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      fpsReq.orderBy = ''
      fpsReq.isDescending = false
    }
  }
  listDataLoadingState.value = true
  $f.axios.get<GetUserInfoListResp>('/comm/usermgr/get-user-info-list', {params: fpsReq})
    .then(result => {
      fpsAssist.handleGenericFpsResp(result.data)
      $d.tableData = result.data.userInfoList
      fpsAssist.saveFpsReq(fpsReq)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      listDataLoadingState.value = false
    })
}

// FPS配置
const {
  fpsInfo,
  fpsAssist,
  fpsNav,
  searchBarVisibility
} = useFpsHelper('/comm/cfg/user',
  '/comm/cfg/user/detail',
  '/comm/cfg/user/create',
  '/comm/cfg/user/edit',
  fpsReq, columnsDefine,
  null,
  loadListData)

const fx = $f
const ui = $f.ui

</script>
